<template>
  <div :class="`${PREFIX}`">
    <Swipe
      :class="`${PREFIX}-my-swipe`"
      vertical
      :loop="false"
      :show-indicators="false"
      ref="swipeRef"
    >
      <SwipeItem>
        <div :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-first`]">
          <div :class="`${PREFIX}-head`">
            <img class="logo" src="../assets/img/logo1.jpg" alt="" />
            <span class="nav">关于</span>
          </div>
          <div class="wrap">
            <div class="mainTitle">打开属于你的 <br />婚姻方式</div>
            <img
              :class="`${PREFIX}-my-swipe-first-img1`"
              src="../assets/img/logo.png"
              alt=""
            />
            <img
              :class="`${PREFIX}-my-swipe-first-img2`"
              src="../assets/img/img1.png"
              alt=""
            />
            <div :class="`${PREFIX}-my-swipe-first-block`">
              <div :class="`${PREFIX}-my-swipe-first-block-item`">
                <img
                  :class="`${PREFIX}-my-swipe-first-block-item-logo`"
                  src="../assets/img/yonghu-yuan.png"
                  alt=""
                />
                <p :class="`${PREFIX}-my-swipe-first-block-item-line1`">
                  适用人群
                </p>
                <p
                  :class="`${PREFIX}-my-swipe-first-block-item-line2`"
                  @click="swiperToPage(2)"
                >
                  点击查看
                  <img src="../assets/img/31fanhui1.png" alt="" />
                </p>
              </div>
              <div :class="`${PREFIX}-my-swipe-first-block-item`">
                <img
                  :class="`${PREFIX}-my-swipe-first-block-item-logo`"
                  src="../assets/img/xuanze.png"
                  alt=""
                />
                <p :class="`${PREFIX}-my-swipe-first-block-item-line1`">
                  为什么选
                </p>
                <p
                  :class="`${PREFIX}-my-swipe-first-block-item-line2`"
                  @click="swiperToPage(3)"
                >
                  点击查看
                  <img src="../assets/img/31fanhui1.png" alt="" />
                </p>
              </div>
              <div :class="`${PREFIX}-my-swipe-first-block-item`">
                <img
                  :class="`${PREFIX}-my-swipe-first-block-item-logo`"
                  src="../assets/img/zhuyi.png"
                  alt=""
                />
                <p :class="`${PREFIX}-my-swipe-first-block-item-line1`">
                  注意什么
                </p>
                <p
                  :class="`${PREFIX}-my-swipe-first-block-item-line2`"
                  @click="swiperToPage(4)"
                >
                  点击查看
                  <img src="../assets/img/31fanhui1.png" alt="" />
                </p>
              </div>
            </div>
            <Btn />
            <img
              :class="`${PREFIX}-my-swipe-first-arrow`"
              src="../assets/img/downarrow.png"
              alt=""
            />
            <p class="addtips">电话：010-56238505 <br>地址：北京市丰台区角门18号枫竹苑一区1号楼8层821  <br>北京市飞尚百逸科技有限公司&nbsp;&nbsp;&nbsp;
              <a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP2023032965号-1</a>
            </p>
          </div>
        </div>
      </SwipeItem>
      <SwipeItem>
        <!-- <div :class="`${PREFIX}-head`">
          <img class="logo" src="../assets/img/logo.png" alt="">
          <img class="nav" src="../assets/img/top1.png" alt="">
        </div> -->
        <div
          class="padding52"
          :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-second`]"
        >
          <p class="mainTitle">开启99友婚</p>
          <div style="text-align: center">
            <p class="subTitle">友情婚姻</p>
            <p class="tips">
              指的是朋友之间为了各种原因而相互结婚，双方不存在恋爱情感，仅仅是为了互相照顾，解决生活上的问题
            </p>
            <p class="subTitle">相对于传统婚姻</p>
            <p class="tips">
              友婚更注重互相理解、信赖和尊重，而非恋爱情感和浪漫情怀
            </p>
            <p class="subTitle">婚姻关系</p>
            <p class="tips">
              友婚的婚姻关系是建立在朋友之间的基础上，需要双方有着相似的生活习惯、价值观和目标
            </p>
            <img
              :class="`${PREFIX}-my-swipe-second-img`"
              src="../assets/img/img2.png"
              alt=""
            />
          </div>
          <Btn />
        </div>
      </SwipeItem>
      <SwipeItem>
        <div
          class="padding40"
          :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-third`]"
        >
          <p class="mainTitle">99友婚适合哪些人</p>
          <div>
            <p class="subTitle">
              <img
                class="subTitleImg"
                src="../assets/img/aiqingyulangman--2.png"
                alt=""
              />
              爱情与婚姻不能兼容
            </p>
            <p class="tips">
              适合于可能有自己喜欢的人，但因各种原因而不能一起走入婚姻的人
            </p>
            <p class="subTitle">
              <img src="../assets/img/aiqingyulangman-.png" alt="" />
              对婚姻有实际的需求
            </p>
            <p class="tips">
              适合于可能因为社会压力、经济、生活或者其他原因，需要有一个婚姻关系的人
            </p>
            <p class="subTitle">
              <img src="../assets/img/langman.png" alt="" />
              没有浪漫感情的需求
            </p>
            <p class="tips">
              适合于那些没有浪漫感情需求，或者不打算寻找浪漫伴侣的人
            </p>
            <p class="subTitle">
              <img src="../assets/img/aiqingyulangman--3.png" alt="" />
              对婚姻有特殊的看法
            </p>
            <p class="tips">
              一些人可能认为婚姻应该基于友谊和互助，而不是浪漫感情
            </p>
          </div>
          <Btn />
        </div>
      </SwipeItem>
      <SwipeItem>
        <!-- <div :class="`${PREFIX}-head`">
          <img class="logo" src="../assets/img/logo.png" alt="">
          <img class="nav" src="../assets/img/top1.png" alt="">
        </div> -->
        <div
          class="padding40"
          :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-fourth`]"
        >
          <p class="mainTitle">为什么要选择99友婚</p>
          <div>
            <p class="subTitle">
              <img src="../assets/img/qiandai.png" alt="" />
              经济支持
            </p>
            <p class="tips">
              友婚可以提供一种经济上的互助和支持，降低单身生活的经济压力
            </p>
            <p class="subTitle">
              <img src="../assets/img/shehui.png" alt="" />
              缓解社会压力
            </p>
            <p class="tips">在一些文化中，未婚或单身可能会面临社会压力</p>
            <p class="subTitle">
              <img src="../assets/img/gongxiangdian.png" alt="" />
              共享责任
            </p>
            <p class="tips">
              友婚的伙伴可以共享日常生活的责任，如家务、照顾孩子等
            </p>
            <p class="subTitle">
              <img src="../assets/img/shehui.png" alt="" />
              情感支持
            </p>
            <p class="tips">
              友婚可以提供稳定的情感支持和陪伴，满足人们对亲密的需求
            </p>
          </div>
          <Btn />
        </div>
      </SwipeItem>
      <SwipeItem>
        <!-- <div :class="`${PREFIX}-head`">
          <img class="logo" src="../assets/img/logo.png" alt="">
          <img class="nav" src="../assets/img/top1.png" alt="">
        </div> -->
        <div
          class="padding40"
          :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-fifth`]"
        >
          <p class="mainTitle">选择99友婚要注意什么</p>
          <div>
            <p class="subTitle">
              <img src="../assets/img/qiandai.png" alt="" />
              经济风险
            </p>
            <p class="tips tips1">
              虽然友婚可以提供经济上的互助和支持，但也可能导致经济上的冲突。例如，如果一方有财务问题，可能会影响到另一方。因此，最好在友婚之前讨论并达成一致的财务安排
            </p>
            <p class="subTitle">
              <img src="../assets/img/aiqingyuehui.png" alt="" />
              情感风险
            </p>
            <p class="tips tips2">
              友婚可能会对你的情感生活产生影响。例如，如果你在友婚后遇到了你的浪漫伴侣，可能会面临复杂的情感问题。因此，最好在友婚之前考虑清楚你的情感需求和期望。
            </p>
          </div>
          <Btn />
        </div>
      </SwipeItem>
      <SwipeItem>
        <!-- <div :class="`${PREFIX}-head`">
          <img class="logo" src="../assets/img/logo.png" alt="">
          <img class="nav" src="../assets/img/top1.png" alt="">
        </div> -->
        <div
          class="padding52"
          :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-sixth`]"
        >
          <p class="mainTitle">关于</p>
          <div>
            <p class="subTitle">
              <img src="../assets/img/logo.png" alt="" />
            </p>
            <p class="tips tip1">
              99友婚是北京飞尚百逸科技有限公司开发的一款婚恋社交线上产品。
            </p>
            <p class="tips tip2">
              在这里您可以快速高效的实现婚恋自由，找到您自己的婚恋方式。
            </p>
          </div>
          <Btn />
        </div>
      </SwipeItem>
      <SwipeItem>
        <!-- <div :class="`${PREFIX}-head`">
          <img class="logo" src="../assets/img/logo.png" alt="">
          <img class="nav" src="../assets/img/top1.png" alt="">
        </div> -->
        <div
          class="padding52"
          :class="[`${PREFIX}-my-swipe-page`, `${PREFIX}-my-swipe-seventh`]"
        >
          <p class="vip">会员</p>
          <div class="imgs">
            <div class="imgsItem">
              <img src="../assets/img/icon1.png" alt="" />
              <p>会员标识</p>
            </div>
            <div class="imgsItem">
              <img src="../assets/img/icon2.png" alt="" />
              <p>高级筛选</p>
            </div>
            <div class="imgsItem">
              <img src="../assets/img/icon3.png" alt="" />
              <p>谁看过我</p>
            </div>
            <div class="imgsItem">
              <img src="../assets/img/icon4.png" alt="" />
              <p>谁关注我</p>
            </div>
          </div>
          <div class="price">
            <div class="priceItem">
              <p>连续包月</p>
              <p>¥98</p>
            </div>
            <div class="priceItem">
              <p>连续包季</p>
              <p>¥198</p>
              <p>节省¥96</p>
              <span>月均¥66</span>
            </div>
            <div class="priceItem">
              <p>连续包年</p>
              <p>¥498</p>
              <p>节省¥678</p>
              <span>月均¥41.5</span>
            </div>
          </div>
          <Btn />
        </div>
      </SwipeItem>
      <SwipeItem>
        <div class="zixun">
          <p class="mainTitle">资讯</p>
          <img src="../assets/img/bg.png" alt="" @click="open"/>
          <div class="popup" v-if="show">
            <div class="popupinner">
              <div><span @click="close">关闭</span></div>
              <img src="../assets/img/pay.png" alt="" />
            </div>
          </div>
        </div>
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { Swipe, SwipeItem } from "vant";
import Btn from "./components/Btn.vue";
const PREFIX = "mobile";
export default defineComponent({
  components: {
    Swipe,
    SwipeItem,
    Btn,
  },
  setup() {
    const swipeRef = ref(null);
    const swiperToPage = (val) => {
      swipeRef.value.swipeTo(val);
    };
    const show = ref(false)
    const open = () => {
      show.value = true
    }
    const close = ()=> {
      show.value = false
    }
    return {
      PREFIX,
      swipeRef,
      swiperToPage,
      show,
      open,
      close
    };
  },
});
</script>
<style lang="less">
.mobile {
  .zixun {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    & > img {
      width: 80%;
    }
    .popup {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      .popupinner {
        height: max-content;
        width: 60%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        &>img {
          width: 100%;
        }
        &>div {
          text-align: right;
        }
        span {
          display: inline-block;
          padding: 8px;
          color: #fff;
        }
      }
    }
  }
  &-head {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 14px 18px;
    border-bottom: 1px solid #fff;
    // margin-bottom: 30px;
    .logo {
      width: 157px;
      height: 50px;
    }
    .nav {
      //width: 30px;
      height: 30px;
      font-size: 18px;
      color: #fff;
    }
  }
  width: 100vw;
  height: 100vh;
  background: #7355ff;

  .mainTitle {
    color: #ffffff;
    text-align: center;
    font-size: 32.61px;
    line-height: 38.95px;
    white-space: nowrap;
  }

  .padding52 {
    padding: 0 52px;
  }

  .padding40 {
    padding: 0 40px;
  }

  .subTitle {
    height: 26px;
    color: #ffffff;
    font-size: 22px;
    line-height: 26px;
    display: flex;
    align-items: center;

    & > img {
      width: 36px;
      height: 36px;
      margin-right: 18px;
    }
  }

  .subTitleImg {
    width: 36px;
    height: 36px;
  }

  .tips {
    height: 90px;
    color: #e1e1e1;
    text-align: left;
    font-size: 12px;
    line-height: 15px;
    display: flex;
    align-items: center;
  }

  &-my-swipe {
    width: 100%;
    height: 100%;

    &-page {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    &-first {
      .addtips {
        font-size: 12px;
        color: #fff;
        &>a {
          color: #fff;
        }
      }
      // justify-content: space-between;
      // align-items: center;
      .wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      &-img1 {
        width: 127px;
        height: 46px;
        // margin-top: 68px;
      }

      &-img2 {
        width: 110px;
        height: 124px;
        // margin-top: 46px;
      }

      &-block {
        width: 100%;
        box-sizing: border-box;
        padding: 0 37px;
        display: flex;
        justify-content: space-between;
        // margin: 40px 0 27px 0;

        &-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 90px;
          height: 113px;
          border-radius: 15px;
          opacity: 1;
          border: 1px solid #ffffff;
          color: #ffffff;
          text-align: left;

          &-logo {
            width: 36px;
            height: 36px;
          }

          &-line1 {
            height: 20px;
            color: #ffffff;
            line-height: 20px;
            letter-spacing: -0.6px;
            margin: 5px 0;
          }

          &-line2 {
            height: 16px;
            font-size: 12px;
            line-height: 15px;
            letter-spacing: -0.47px;
            & > img {
              width: 8px;
              height: 13px;
            }
          }
        }
      }

      &-arrow {
        width: 29px;
        height: 18px;
        // margin-top: 18px;
      }
    }

    &-second {
      // .mainTitle {
      //   margin-bottom: 30px;
      // }
      justify-content: space-around;
      align-items: center;
      .subTitle {
        margin-bottom: 10px;
      }

      &-img {
        width: 106px;
        height: 123px;
        margin: 0 auto;
      }
    }

    &-third {
      justify-content: space-around;
      align-items: center;
      // .mainTitle {
      //   margin-bottom: 63px;
      // }

      .tips {
        margin-left: 54px;
      }
    }

    &-fourth {
      justify-content: space-around;
      align-items: center;
      // .mainTitle {
      //   margin-bottom: 63px;
      // }
    }

    &-fifth {
      justify-content: space-around;
      align-items: center;
      // .mainTitle {
      //   margin-bottom: 65px;
      // }

      .tips1 {
        margin-bottom: 47px;
      }

      .tips2 {
        margin-bottom: 130px;
      }
    }

    &-sixth {
      justify-content: space-around;
      align-items: center;
      // .mainTitle {
      //   margin-bottom: 65px;
      // }

      .subTitle {
        height: auto;

        img {
          width: 127px;
          height: 46px;
          margin: 0 auto 80px auto;
        }
      }

      .tips {
        height: auto;
      }

      .tip1 {
        margin-bottom: 16px;
      }

      .tip2 {
        margin-bottom: 225px;
      }
    }
    &-seventh {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .vip {
        width: 100%;
        flex-shrink: 0;
        color: #ffffff;
        text-align: center;
        font-size: 32px;
      }
      .imgs {
        display: flex;
        .imgsItem {
          display: flex;
          flex-direction: column;
          &:not(:first-child) {
            margin-left: 29px;
          }
          & > img {
            width: 44px;
            height: 44px;
          }
          & > p {
            color: #ffffff;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: -0.47px;
            margin-top: 16px;
            white-space: nowrap;
          }
        }
      }
      .price {
        display: flex;
        .priceItem {
          width: 90.58px;
          height: 154px;
          border-radius: 15px;
          border: 1px solid #fff;
          text-align: center;
          box-sizing: border-box;
          padding-top: 18px;
          color: #fff;
          font-size: 12px;
          position: relative;
          overflow: hidden;
          &:not(:first-child) {
            margin-left: 14px;
          }
          & > p {
            &:nth-child(2) {
              // .¥198 {
              //  color: #ffffff;
              //  text-align: center;
              //  font-family: "Inter";
              font-size: 32px;
              //  font-style: normal;
              //  font-weight: 400;
              //  line-height: normal;
              letter-spacing: -1.2px;
              margin: 17px 0 11px 0;
              // }
            }
          }
          & > span {
            display: block;
            width: 100%;
            // width: ;
            height: 20px;
            line-height: 20px;
            // flex-shrink: 0;
            // border-radius:0 0 14px 14px;
            background: #fff;
            color: #7355ff;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
  }
}
</style>
